import { useState, useEffect } from 'react';
import { NavBar, Icon, Toast } from 'antd-mobile';
import { goodsList } from '../../mock/goods';
import * as cartApi from '../../api/cart';

const goodsObj = goodsList.reduce((itemObj, item) => {
    itemObj[item.id] = item;
    return itemObj;
}, {});

console.log('goodsObj', goodsObj);

export default (props) => {
    const [cartList, setCartList] = useState([]);
    const [amount, setAmount] = useState(0);

    // useEffect 函数只能接受同步函数，不能接受异步函数
    useEffect(() => {
        getCartList();
    }, []);

    useEffect(() => {
        const total = cartList.reduce((sum, item) => {
            return sum + goodsObj[item.gid].price * item.num;
        }, 0);
        setAmount(total);
    }, [cartList]);

    const getCartList = async () => {
        const res = await cartApi.getList();
        setCartList(res.data);
    };

    const handleAddNum = async (item) => {
        const res = await cartApi.update(item.gid, item.num + 1);
        if (res.code !== 200) {
            Toast.fail(res.message);
            return;
        }
        getCartList();
    };

    const handleDelete = async (item) => {
        const res = await cartApi.remove(item.gid);
        if (res.code !== 204) {
            Toast.fail(res.message);
            return;
        }
        getCartList();
    };

    const handleSubNum = async (item) => {
        if (item.num <= 1) {
            Toast.fail('你不能再减了，再减就没了');
            return;
        }
        const res = await cartApi.update(item.gid, item.num - 1);
        if (res.code !== 200) {
            Toast.fail(res.message);
            return;
        }
        getCartList();
    };

    return (
        <div className="cart-page">
            <header>
                <NavBar
                    leftContent={<Icon type="left" />}
                    onLeftClick={() => props.history.goBack()}
                >
                    购物车
                </NavBar>
            </header>

            <main>
                <div className="p-3">
                    {cartList.map((item) => {
                        return (
                            <div
                                key={item.gid}
                                className="shadow flex justify-between items-center text-xl mt-3"
                            >
                                <img
                                    src={goodsObj[item.gid].img}
                                    className="w-1/3"
                                />

                                <div>
                                    <h3>{goodsObj[item.gid].name}</h3>
                                    <span className="text-yellow-500">
                                        ¥{goodsObj[item.gid].price / 100}
                                    </span>
                                </div>

                                <div>
                                    <span
                                        className="iconfont icon-icon-1 mr-3 text-xl cursor-pointer"
                                        onClick={() => handleSubNum(item)}
                                    ></span>
                                    <span className="text-xl">{item.num}</span>
                                    <span
                                        className="iconfont icon-icon- ml-3 text-xl cursor-pointer"
                                        onClick={() => handleAddNum(item)}
                                    ></span>
                                </div>

                                <span
                                    className="text-blue-500 mr-4 cursor-pointer"
                                    onClick={() => handleDelete(item)}
                                >
                                    删除
                                </span>
                            </div>
                        );
                    })}
                </div>
            </main>

            <footer className="fixed bottom-0 w-full">
                <div className="flex justify-between items-center px-3">
                    <div className="w-2/3 p-5 text-lg">
                        <span className="mr-2">商品总计:</span>
                        <span className="text-yellow-500">¥{amount / 100}</span>
                    </div>

                    <span className="text-lg bg-red-400 px-4 py-1 rounded text-white">
                        结算
                    </span>
                </div>
            </footer>
        </div>
    );
};
